<template>
  <div class="mod-poap__poapproject">
    <div class="head">
      <div class="state">
        <div class="zero">
          <div class="text">草案</div>
          <div class="num">6</div>
        </div>
        <div class="one">
          <div class="text">已提交</div>
          <div class="num">5</div>
        </div>
        <div class="two">
          <div class="text">重新修订</div>
          <div class="num">4</div>
        </div>
        <div class="three">
          <div class="text">审核通过</div>
          <div class="num">3</div>
        </div>
      </div>
      <div class="operation">
        <div class="query">
          <el-form>
            <el-form-item>
              <el-input v-model="state.dataForm.name" placeholder="请输入项目名称" @keyup.enter="getData()"
                :input-style="{ width: '100%',height:'40px',minWidth:'100px'}">
                <template #append>
                  <el-button type="default" @click="getData">{{ $t("query") }}</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="button_box">
          <div class="add" v-if="state.hasPermission('poap:poapproject:save')" @click="addOrUpdateHandle()">
            <div class="text">添加项目</div>
            <div class="img"><img src="@/assets/images/add.png" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
    <div class="voteBox">
      <div class="voteItem" v-for="(item, index) in state.dataList" :key="index">
        <div class="top">
          <!-- 议题名称-->
          <div class="top-header">
            <div class="title">{{ item.name }}</div>
          </div>
          <div class="info_box">
            <div class="info" v-html="item.info"></div>
          </div>
          <!--  项目内容-->
          <div class="img-box">
            <el-tooltip effect="light" :content="item.pageStatus === 0 ? '有论文' : '无论文'" placement="top">
              <div class="img">
                <img :src="item.pageStatus === 0 ? `src/assets/images/page_0.png` : `src/assets/images/page_1.png`"
                  alt="" />
              </div>
            </el-tooltip>
            <el-tooltip effect="light" :content="item.codeStatus === 0 ? '有源代码' : '无源代码'" placement="top">
              <div class="img">
                <img :src="item.codeStatus === 0 ? 'src/assets/images/code_0.png' : 'src/assets/images/code_1.png'"
                  alt="" />
              </div>
            </el-tooltip>
            <el-tooltip effect="light" :content="item.datasetStatus === 0 ? '有数据集' : '无数据集'" placement="top">
              <div class="img">
                <img
                  :src="item.datasetStatus === 0 ? 'src/assets/images/dataset_0.png' : 'src/assets/images/dataset_1.png'"
                  alt="" />
              </div>
            </el-tooltip>
          </div>
        </div>

        <!--  项目-->
        <div class="state_box">
          <!--   浏览次数-->
          <div class="viewNumber">
            <div class="img"><img src="@/assets/images/view.png" /></div>
            <div class="num">{{ item.viewNumber }}</div>
          </div>
          <!--       下载次数  -->
          <div class="downNumber">
            <div class="img"><img src="@/assets/images/down.png" /></div>
            <div class="num">{{ item.viewNumber }}</div>
          </div>
          <!--          开源许可证-->
          <div class="license">
            <div class="img"><img src="@/assets/images/license.png" /></div>
            <div class="num">{{ item.licenseDTO.name }}</div>
          </div>
        </div>
        <div class="check">
          <el-button v-if="item.status === 3 && state.hasPermission('poap:poapproject:concent')" type="primary" link
            @click="checkProject(item.id, state.dataForm.auditorId)">查看内容</el-button>
          <el-button link v-if="item.status !== 3" type="primary"
            @click="updateStatus(item.id, item.$index, item.name, item.status)">{{ item.status !== 0 ? (item.status === 2
              ? "重新提交" : "已提交") : "提交项目" }}</el-button>
          <el-button link v-if="state.hasPermission('poap:poapproject:participantproject')" type="primary"
            @click="checkParticipant(item.id, item.status)">查看合作者</el-button>
          <el-button link
            v-if="state.hasPermission('poap:poapproject:update') && (item.status === 0 || item.status === 2)"
            type="primary" @click="addContent(item.id)">添加相关内容</el-button>
          <el-button link
            v-if="state.hasPermission('poap:poapproject:delete') && (item.status === 0 || item.status === 2)"
            type="primary" @click="state.deleteHandle(item.id)">{{ $t("delete") }}</el-button>
        </div>
      </div>
    </div>
  
    <div class="bar">
      <!-- <el-pagination :current-page="state.poapPage" :page-sizes="[3]" :page-size="state.poapLimit"
        :total="state.poapTotal" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"> </el-pagination> -->
        <el-pagination :current-page="state.poapPage" :page-size="state.poapLimit"
        :total="state.poapTotal" layout="total, prev, pager, next, jumper"
        @current-change="pageCurrentChangeHandle"> </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update :key="addKey" :projectId="state.currentId" ref="addOrUpdateRef"
        @refreshDataList="getData"></add-or-update>
      <Participant ref="ParticipantRef" @refreshDataList="getData" :projectId="state.currentId"
        :projectStatus="state.currentStatus"></Participant>
      <Content ref="contentRef" :projectId="state.currentId" :projectStatus="state.currentStatus"
        @getDataListChild="getDataListChild"></Content>
      <checkPro :key="addKey" :projectId="state.currentId" :isAudit="false" ref="checkProRef" @refreshDataList="getData"
        @getDataListChild="getDataListChild"></checkPro>
    </div>
  </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { useAppStore } from "@/store";
import { nextTick, onBeforeMount, onBeforeUpdate, onMounted, reactive, ref, toRefs, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddOrUpdate from "./poapproject-add-or-update.vue";
import Participant from "@/views/poap/poapparticipantproject.vue";
import baseService from "@/service/baseService";
import Content from "./concent.vue";
import checkPro from "./checkProject.vue";

const store = useAppStore();
const view = reactive({
  getDataListIsPage: true,
  exportURL: "/poap/poapproject/export",
  deleteURL: "/poap/poapproject",
  deleteIsBatch: true,
  poapOrder: "",
  poapOrderField: "",
  poapPage: 1,
  poapLimit: 3,
  poapTotal: 0,
  currentId: "", //当前项目id
  currentStatus: 0, //当前项目状态
  drawerPart: false, //合作者抽屉
  dataForm: {
    name: "",
    status: "",
    auditorId: "",
    codeStatus: "",
    pageStatus: "",
    datasetStatus: "",
    userId: "",
    delFlag: 0
  },
  statusText: [
    { value: 0, label: "草案" },
    { value: 1, label: "已提交" },
    { value: 2, label: "重新修订" },
    { value: 3, label: "审核通过" }
  ],
  currentName: ""
});

const state = reactive({ ...useView(view), ...toRefs(view) });
const sysNotice = reactive({
  id: "",
  noticeType: 2,
  title: "项目通知",
  content: "",
  receiverType: 0,
  receiverTypeIds: "",
  receiverTypeList: [],
  status: 1,
  senderName: "系统发送",
  senderDate: "",
  creator: 0,
  createDate: ""
});

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
// 分页, 每页条数
// const pageSizeChangeHandle = (val: number) => {
//   state.poapPage = 1;
//   state.poapLimit = val;
//   getData();
// };
// 分页, 当前页
const pageCurrentChangeHandle = (val: number) => {
  state.poapPage = val;
  getData();
};
const getLoginUser = () => {
  console.log(store.state);
  state.dataForm.userId = store.state.user.id;
};

const getData = () => {
  baseService
    .get("/poap/poapproject/page", {
      order: state.poapOrder,
      orderField: state.poapOrderField,
      page: state.getDataListIsPage ? state.poapPage : null,
      limit: state.getDataListIsPage ? state.poapLimit : null,
      ...state.dataForm
    })
    .then((res) => {
      console.log(res);
      if (res.code != 0) return false;
      state.dataList = res.data;
      state.dataListLoading = false;
      state.dataList = state.getDataListIsPage ? res.data.list : res.data;
      state.poapTotal = state.getDataListIsPage ? res.data.total : 0;
      getText();
    });
};

const getText = () => {
  state.dataList = state.dataList!.map((item, index) => {
    return { ...item, statusText: "" };
  });
  for (let i = 0; i < state.dataList.length; i++) {
    if (state.dataList[i].status === 0) state.dataList[i].statusText = "草案";
    else if (state.dataList[i].status === 1) state.dataList[i].statusText = "已提交";
    else if (state.dataList[i].status === 2) state.dataList[i].statusText = "重新修订";
    else if (state.dataList[i].status === 3) state.dataList[i].statusText = "审核通过";
  }
};

const ParticipantRef = ref();
const checkParticipant = (id: string, status: number) => {
  state.drawerPart = true;
  state.currentId = "";
  state.currentId = id;
  state.currentStatus = 0;
  state.currentStatus = status;
  nextTick(() => {
    ParticipantRef.value.initPart();
    ParticipantRef.value.$forceUpdate();
  });
};

const contentRef = ref();
const addContent = (id: string) => {
  state.currentId = "";
  state.currentId = id;
  nextTick(() => {
    contentRef.value.init(id);
    contentRef.value.$forceUpdate;
  });
};

const checkProRef = ref();
const checkProject = (id: string, userId: string) => {
  checkProRef.value.init(userId, id);
};
const getDataListChild = () => {
  getData();
};

const updateStatus = (id: string, index: number, name: string, status: number) => {
  console.log(id);
  console.log(name);
  console.log(typeof status);
  state.currentName = name;
  if (status === 1) {
    ElMessage.info("已提交，不能重复提交");
  } else {
    ElMessageBox.confirm("", "确认提交吗？", {
      confirmButtonText: "确认",
      cancelButtonText: "取消"
    }).then(() => {
      baseService.put("/poap/poapproject/updateProjectStatus", { projectId: id }).then((res) => {
        console.log(res);
        if (res.code != 0) ElMessage.error("提交失败");
        ElMessage.success("提交成功");
        getData();
        sysNotice.content = `您参与的项目“${name}”状态已改变，请及时查看`;
        console.log(sysNotice);
        console.log(state.dataForm.userId);
        let participantIds = [];
        participantIds[0] = state.dataForm.userId;
        baseService.post("/poap/poapparticipantproject/notice", { noticeDTO: sysNotice, projectId: id }).then((res) => {
          console.log(res);
          getData();
        });
      });
    });
  }
};

const dataListRef = ref();
watch(
  dataListRef,
  (newValue, oldValue) => {
    console.log(newValue);
  },
  { deep: true }
);

onBeforeMount(() => {
  getLoginUser();
  getData();
});
</script>
<style lang="less" scoped>
.mod-poap__poapproject {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;

  .head {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .operation {
    display: flex;
    justify-content: space-around;
    width: 55%;
    height: 50%;
    margin: auto;
    margin-top: 40px;
  }

  .state {
    width: 55%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: auto;

    .zero {
      width: 20%;
      min-width: 130px;
      min-height: 25px;
      height: 6vh;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      border-radius: 8%;
      box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
      margin-right: 10px;

      .text {
        margin-top: 2vh;
        vertical-align: bottom;
        height: 45%;
        width: 70%;
        background-size: 100% 100%;
        font-size: 1.6em;
        line-height: 3vh;
        text-align: center;
        color: #4d93c7;
      }

      .num {
        min-width: 20px;
        margin-left: 1vh;
        height: 75%;
        font-size: 1.7em;
        line-height: 7vh;
        color: #4380ad;
      }
    }

    .one {
      width: 20%;
      min-width: 130px;
      min-height: 25px;
      height: 6vh;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      border-radius: 8%;
      box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
      margin-right: 10px;

      .text {
        margin-top: 2vh;
        vertical-align: bottom;
        height: 45%;
        width: 70%;
        background-size: 100% 100%;
        font-size: 1.6em;
        line-height: 3vh;
        text-align: center;
        color: #4d93c7;
      }

      .num {
        min-width: 20px;
        margin-left: 1vh;
        height: 75%;
        font-size: 1.7em;
        line-height: 7vh;
        color: #4380ad;
      }
    }

    .two {
      width: 20%;
      min-width: 130px;
      min-height: 25px;
      height: 6vh;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      border-radius: 8%;
      box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
      margin-right: 10px;

      .text {
        margin-top: 2vh;
        vertical-align: bottom;
        height: 45%;
        width: 70%;
        background-size: 100% 100%;
        font-size: 1.6em;
        line-height: 3vh;
        text-align: center;
        color: #4d93c7;
      }

      .num {
        min-width: 20px;
        margin-left: 1vh;
        height: 75%;
        font-size: 1.7em;
        line-height: 7vh;
        color: #4380ad;
      }
    }

    .three {
      width: 20%;
      min-width: 130px;
      min-height: 25px;
      height: 6vh;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      border-radius: 8%;
      box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
      margin-right: 10px;

      .text {
        margin-top: 2vh;
        vertical-align: bottom;
        height: 45%;
        width: 70%;
        background-size: 100% 100%;
        font-size: 1.6em;
        line-height: 3vh;
        text-align: center;
        color: #4d93c7;
      }

      .num {
        min-width: 20px;
        margin-left: 1vh;
        height: 75%;
        font-size: 1.7em;
        line-height: 7vh;
        color: #4380ad;
      }
    }
  }

  .button_box {
    min-width: 120px;
    min-height: 30px;
    margin-bottom: 3vh;
    width: 18%;
    // height: 4vh;
    height: 5.5vh;
    background-color: #fff;
    border-radius: 0.6vw;
    box-shadow: 2px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: end;
    margin-left: 20px;

    .add {
      width: 95%;
      height: 40%;
      margin-bottom: 0.9vh;
      background-size: 100% 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      cursor: pointer;
      // min-width: 140px;
      // min-height: 25px;
      .text {
        min-width: 10px;
        // font-size: 1.2em;
        font-size: 1.4em;
        line-height: 1.8vh;
        color: #4d93c7;
        align-items: center;
      }

      .img {
        width: 16%;
        margin-left: 0.8vw;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        img {
          width: 100%;
        }
      }
    }

    .add:hover {
      opacity: 0.5;
    }
  }

  .query {
    margin-left: 1vh;
    width: 75%;
  }

  .query :deep(.el-input) {
    height: 4vh;
    min-height: 30px;
  }

  .voteBox {
    margin-top: 50px;
    width: 75vw;
    min-height: 200px;
    height: 48.2vh;
    // height: 300px;
    // overflow-x: scroll;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;

    //议题盒子
    .voteItem:nth-child(3n) {
      margin-right: 0;
    }

    .voteItem {
      margin-right: 4.5%;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 1.5vw;
      width: 30%;
      // width: 450px;
      height: 100%;
      //background-color: #ffffff;
      display: flex;
      flex-direction: column;
      background-image: url("@/assets/images/vote_item_bg0.png");
      background-size: 100% 100%;
      min-width: 300px;

      .top {
        margin-top: 3%;
        width: 100%;
        height: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;

        .top-header {
          width: 96%;
          display: flex;
          flex-direction: row;

          .title {
            width: 98%;
            font-size: 1.7em;
            color: #4d93c7;
            text-align: center;
            border-left: none;
          }
        }

        .info_box {
          margin-top: 4%;
          width: 96%;
          height: 75%;
          // height: 110px;
          overflow-y: auto;
          // background-color: rgba(78, 148, 199, 0.41);
          padding: 2% 5%;

          .info {
            //line-height: 15vh;
            text-align: center;
            font-size: 1.1em;
            // overflow: hidden;
            // display: -webkit-box;
            // -webkit-line-clamp: 5; /* 假设最多显示3行文本 */
            // -webkit-box-orient: vertical;
            // text-overflow: ellipsis;
          }
        }

        .img-box {
          width: 96%;
          height: 8vh;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              height: 60%;
            }
          }

          .img:hover {
            opacity: 0.5;
          }
        }
      }

      .check {
        height: 10%;
        display: flex;
        justify-content: center;
      }

      .state_box {
        height: 20%;
        margin-top: 7%;
        border-top: 1px solid rgba(77, 147, 199, 0.78);
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .viewNumber {
          width: 30%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 30%;
            display: flex;
            align-items: center;

            img {
              width: 100%;
            }
          }

          .num {
            text-align: center;
            line-height: 8.5vh;
          }
        }

        .downNumber {
          width: 30%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 30%;
            display: flex;
            align-items: center;

            img {
              width: 85%;
            }
          }

          .num {
            text-align: center;
            line-height: 8.5vh;
          }
        }

        .license {
          width: 30%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .img {
            width: 30%;
            display: flex;
            align-items: center;

            img {
              width: 85%;
            }
          }

          .num {
            text-align: center;
            line-height: 8.5vh;
          }
        }
      }
    }
  }

  .bar {
    margin-top: 20px;
  }
}</style>
